<template>
  <div class="container">
    <TableWrapper :title="'操作日志'" :header="header">
      <template #header>
        <el-form ref="form" :model="query" label-width="100px" :inline="true">
          <el-form-item label="操作地址：">
            <el-input
              style="width: 220px"
              v-model="query.operIp"
              placeholder="请输入操作地址"
            ></el-input>
          </el-form-item>
          <el-form-item label="系统模块：">
            <el-input
              style="width: 220px"
              v-model="query.title"
              placeholder="请输入系统模块："
            ></el-input>
          </el-form-item>
          <el-form-item label="操作人员：">
            <el-input
              style="width: 220px"
              v-model="query.operName"
              placeholder="请输入操作人员"
            ></el-input>
          </el-form-item>
          <el-form-item label="操作类型：">
            <el-select
              v-model="query.businessType"
              placeholder="操作类型"
              style="width: 220px"
            >
              <el-option
                v-for="dict in dict.type.sys_oper_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="操作状态：">
            <el-select
              v-model="query.status"
              placeholder="操作状态"
              style="width: 220px"
            >
              <el-option
                v-for="dict in dict.type.sys_common_status"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="操作时间：">
            <el-date-picker
              style="width: 220px"
              v-model="query.operTime"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item class="ml15">
            <el-button
              icon="el-icon-search"
              type="primary"
              @click="searchChange"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh-left" @click="searchReset"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </template>

      <template #main>
        <div style="margin-bottom: 18px" v-if="listType == 'operLog'">
          <el-button type="warning" plain icon="el-icon-download"
            >导出</el-button
          >
        </div>
        <el-table
          :data="data"
          :header-cell-style="headStyle"
          :default-sort="defaultSort"
          @sort-change="handleSortChange"
        >
          <el-table-column
            v-if="listType == 'operLog'"
            align="center"
            type="selection"
            width="60"
          >
          </el-table-column>
          <el-table-column
            align="center"
            label="日志编号"
            prop="operId"
          ></el-table-column>
          <el-table-column
            label="系统模块"
            align="center"
            prop="title"
            :show-overflow-tooltip="true"
          />
          <el-table-column label="操作类型" align="center" prop="businessType">
            <template slot-scope="scope">
              <dict-tag
                :options="dict.type.sys_oper_type"
                :value="scope.row.businessType"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="请求方式"
            align="center"
            prop="requestMethod"
          />
          <el-table-column
            label="操作人员"
            align="center"
            prop="operName"
            width="110"
            :show-overflow-tooltip="true"
            sortable="custom"
            :sort-orders="['descending', 'ascending']"
          />
          <el-table-column
            label="操作地址"
            align="center"
            prop="operIp"
            width="130"
            :show-overflow-tooltip="true"
          />
          <el-table-column label="操作状态" align="center" prop="status">
            <template slot-scope="scope">
              <dict-tag
                :options="dict.type.sys_common_status"
                :value="scope.row.status"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="操作日期"
            align="center"
            prop="operTime"
            width="180"
            sortable="custom"
            :sort-orders="['descending', 'ascending']"
          >
          </el-table-column>
          <el-table-column
            label="消耗时间"
            align="center"
            prop="costTime"
            width="110"
            :show-overflow-tooltip="true"
            sortable="custom"
            :sort-orders="['descending', 'ascending']"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.costTime }}毫秒</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-view"
                @click="handleView(scope.row)"
                v-hasPermission="['system:operlog:query']"
                >详细</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>

      <template #footer>
        <el-pagination
          @size-change="sizeChange"
          @current-change="currentChange"
          :current-page="page.currentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="page.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
        >
        </el-pagination>
      </template>
    </TableWrapper>

    <el-dialog title="查看日志详情" :visible.sync="dialogVisible" width="70%">
      <OperationLogView :data="form"></OperationLogView>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import OperationLogView from "./OperationLogView.vue";
import TableWrapper from "@/components/Table/TableWrapper.vue";
import { getList, getNotice } from "@/api/system/operationLog.js";

export default {
  dicts: ["sys_oper_type", "sys_common_status"],
  components: { OperationLogView, TableWrapper },
  props: {
    // 是否显示搜索头
    header: {
      type: Boolean,
      default: true,
    },
    // 列表类型
    listType: {
      type: String,
      default: "operLog",
    },
    // 查询参数
    queryParams: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      // 搜索数据
      query: {},
      // 多选数据
      selectionList: [],
      // 表数据
      data: [],
      // 弹出框数据
      form: {},
      // 分页数据
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      // 控制弹出框
      dialogVisible: false,
      // 默认排序
      defaultSort: { prop: "operTime", order: "descending" },
    };
  },
  created() {
    this.refreshChange();
  },
  methods: {
    // 搜索重置
    searchReset() {
      this.query = {};
      this.refreshChange();
    },
    // 搜索点击
    searchChange() {
      this.refreshChange();
    },
    // 多选发生改变
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
    },
    // 当前分页发生改变
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
      this.refreshChange();
    },
    // 分页大小发生改变
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.refreshChange();
    },
    // 刷新数据
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    // 处理表单开启
    beforeOpen(row) {
      // 打开提交框
      this.dialogVisible = true;
    },
    // 获取详情信息
    handleView(row) {
      getNotice(row.operId).then((res) => {
        this.form = res.data;
        this.dialogVisible = true;
      });
    },
    // 重载数据
    onLoad(page, params = {}) {
      let values = {
        ...params,
        ...this.queryParams,
        // 排序字段
        orderByColumn: this.defaultSort.prop,
        // 排序方式 desc 降序 asc 升序
        isAsc: this.defaultSort.order == "descending" ? "desc" : "asc",
      };

      // 传递日期
      if (values.operTime && values.operTime.length == 2) {
        values.beginTime = params.operTime[0];
        values.endTime = params.operTime[1];
      }

      getList(
        page.currentPage,
        page.pageSize,
        Object.assign(values, this.query)
      ).then((res) => {
        const data = res.data;
        this.page.total = data.total;
        this.data = data.records;
        this.selectionClear();
      });
    },
    // 自定义表头颜色
    headStyle({ row, rowIndex }) {
      if (rowIndex === 0) {
        return {
          backgroundColor: "#F8FAFF",
          fontWeight: 800,
          color: "#515a6e",
        };
      }
    },
    handleSortChange(column, prop, order) {
      this.defaultSort.order = column.order;
      this.defaultSort.prop = column.prop;
      this.refreshChange();
    },
  },
};
</script>
